<!DOCTYPE html>
<html>

	<head>
		<title>图片懒加载</title>
		<meta charset="utf-8">
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.warp {
				width: 1200px;
				margin: 0 auto;
			}
			
			ul,
			li {
				list-style: none;
			}
			
			li {
				width: 300px;
				height: 200px;
				border: 1px solid #ccc;
				margin-left: 400px;
				margin-bottom: 40px;
			}
			
			li img {
				display: block;
				width: 300px;
				height: 200px;
			}
		</style>
	</head>

	<body>
		<div class="warp">
			<ul>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
				<li><img src="../img/zw/fff.png" data-url="../img/zw/200.jpg" /></li>
			</ul>
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$(function() {

			load();
			$(window).on('scroll', function() {
				//  设置定时器
				var clock = setTimeout(function() {
					//  变量图片
					load();
				}, 500)
			})

			function load() {
				$('img').each(function() {
					var all_img = $(this);
					//  如果图片没有属性 就返回空值
					if(all_img.attr('isLoaded')) {
						return;
					}
					//  获取浏览器高度和图片高度
					var sh = $(window).scrollTop();
					var wh = $(window).height();
					var top = all_img.offset().top;
					if(top < sh + wh) {
						all_img.attr('src', all_img.attr('data-url'))
						all_img.attr('isLoaded', true);
					}
				})
			}
		})
	</script>

</html>